<template>
    <div class="collapseBox" v-if="collapse && pageSet().layoutComponent.value !== 'classical'">
        <img :src="logo" alt="" class="logo" />
    </div>
    <div class="logoBox" v-else>
        <div class="logoWrap">
            <img :src="logo" alt="" class="logo" />
            <span>Geeker Admin</span>
        </div>
    </div>
</template>
    
<script setup>
import { computed } from 'vue'
import { isCollapse , pageSet } from "@/store/pinia";
import logo from "@/assets/logo.png";
const collapse = computed(() => isCollapse().isCollapse)
</script>
    
<style scoped lang="scss">
.logoWrap {
    height: 55px;
    width: 210px;
    border-bottom: 1px solid #282a35;
    border-right: 1px solid #282a35;
    background-color: var(--horizontal-header-bgcolor);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
        font-size: 20px;
        font-weight: 700;
        color: #dadada;
        white-space: nowrap;
        margin-left: 8px;
    }
}
.collapseBox{
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo {
    width: 28px;
    height: 25px;
    background-size: 100%;
    background-repeat: no-repeat;
}
</style>